<template>
  <div style="display: flex">
    <category-panel title="分类" icon="tree" request="sysReportCategory" @delClick="delClick" @notClick="notClick"
                    @nodeClick="nodeClick"></category-panel>
    <el-container>
      <el-header
        @click.native.self="isShow=false"
        style=" display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>

          <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">

              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" clearable @clear="clearName" placeholder="报表名" v-model="queryText"></el-input>
              </div>
            </div>
            <div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                       v-permission="['sysReport.add']">新增</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <div class="pd10">
<!--        <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">-->
<!--          <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" style="width: 300px"-->
<!--                    v-model="queryText"></el-input>-->
<!--          <el-button @click="queryClick" icon="el-icon-search" style="margin-left: 10px" type="primary">查询-->
<!--          </el-button>-->
<!--          <el-button @click="resetClick()" icon="el-icon-refresh-right" style="margin-left: 10px"-->
<!--                     type="info">-->
<!--            重置-->
<!--          </el-button>-->
<!--        </div>-->
        <el-table
          v-loadMore="[payLoads,'sysReport-list']"
          @click.native="isShow=false"
          :data="reportList"
          :height="curHeight"
          @sort-change="sortChange"
          border
          ref="table"
          stripe
          style="width: 99%;"
        >
          <el-table-column
            align="center"
            fixed
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="createDate"
            width="140"
          >
            <template slot-scope="scope">
               <span>
              {{ scope.row.createDate | formatDate}}
               </span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="报表名称"
            prop="name"
            width="140"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="简介"
            prop="remark"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            align="left"
            label="状态"
            prop="status"
            width="80"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status == 0 ? 'warning':scope.row.status == 1 ?'success':''">
                   <span>
                     {{scope.row.status | watchShare}}
                   </span>
                </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-tooltip @click="" class="item" content="修改报表" effect="dark"
                          placement="top-start"
                          v-permission="['sysReport.edit']">
                <a @click="editClick(scope.row)">
                   <i style="color: #409EFF" class="el-icon-edit" />
                </a>
              </el-tooltip>
              <el-tooltip class="item" content="删除报表" effect="dark"
                          placement="top-start"
                          v-permission="['sysReport.del']">
                <a @click="delClick(scope.row)" style="margin-left: 10px;">
                   <i style="color: #F56C6C" class="el-icon-delete" />
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination :limit.sync="pageSize" :page.sync="pageNum" :total="total" @pagination="loadUpMarket"
                    v-show="total>0"></pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
    import loadMore from '@/utils/loadMore.js'
    import Pagination from '@/components/Pagination';
    import {EventBus} from '@/api/eventBus'
    import { list, del, edit } from '@/api/sysReport'
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import request from '@/utils/request'
    import CategoryPanel from '@/components/CategoryPanel'

    export default {
        name: "sysReport-list",
        directives: { permission, loadMore },
        components: {
            Pagination,
            CategoryPanel
        },
        filters: {
            watchShare(val) {
                if (val == 0 ) {
                    return '已禁用'
                } else {
                    return '已启用'
                }
            },
            formatDate (value){
                if (value !== undefined) {
                    let date = new Date(value)
                    let year = date.getFullYear()
                    let month = date.getMonth() + 1 + ""
                    let day = date.getDate() + ""
                    let hour = date.getHours() + ""
                    let minute = date.getMinutes() + ""
                    let second = date.getSeconds() + ""
                    return `${year}年${month.padStart(2, "0")}月${day.padStart(2, "0")}日`
                }
            },
        },
        data () {
            return {
                isShow: false,
                queryType: true,
                query: true,
                queryText: '',
                pageNum: 1,// 当前页
                pageSize: 20, // 每页显示条目个数
                total: 0,// 总条目数,
                startDate: '', // 开始时间
                endDate:'',// 结束时间
                sortField:'',
                curHeight: null,
                reportList: [],
                dateValue: '',
                reportCategoryId: '',
                payLoads: ''
            }
        },
        created() {
            var _this = this;
            EventBus.$on('sysReport-add', res => { // 监听新增完毕
                // 更新列表数组
                _this.reportList.splice(0, 0, res)
            });
            EventBus.$on('sysReport-edit', res => { // 监听新增完毕
                // 更新列表数组
                for (var i = 0; i < _this.reportList.length; i++) {
                    if (_this.reportList[i].id == res.id) {
                        _this.reportList[i] = res
                    }
                }
            })
        },
        activated() {
          this.payLoads = new Date().getTime();
        },
        mounted() {
            this.comeIn()
            this.beforeMount()
            this.ListRequest()
        },
        methods: {
          clearName(){
            this.queryText=''
          },
            beforeMount() {
                var _this = this
                window.onresize = () => {
                    return (() => {
                        if (this.queryType == false) {
                            var h = document.documentElement.clientHeight || document.body.clientHeight;
                            _this.curHeight = h - 266//减去页面上固定高度height
                        } else {
                            var h = document.documentElement.clientHeight || document.body.clientHeight;
                            _this.curHeight = h - 220//减去页面上固定高度height
                        }
                    })()
                }
            },
            chooseClick () {
                this.queryType = !this.queryType
                if (this.queryType == false) {
                    var h = document.documentElement.clientHeight || document.body.clientHeight;
                    this.curHeight = h - 266//减去页面上固定高度height
                } else {
                    var h = document.documentElement.clientHeight || document.body.clientHeight;
                    this.curHeight = h - 220//减去页面上固定高度height
                }
            },
            comeIn() {
                var h = document.documentElement.clientHeight || document.body.clientHeight;
                this.curHeight = h - 220//减去页面上固定高度height
            },
            queryClick () {
                this.reportList = []
                this.pageNum = 1
                this.ListRequest()
            },
            addClick () {
                this.$router.push({
                    path: '/sysReport/add'
                })
            },
            editClick (data) {
                this.$router.push({
                    path: '/sysReport/edit',
                    query: {id: data.id}
                })
            },
            delClick (data) {
                console.log(data)
                this.$confirm('是否删除此报表, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // let params = new URLSearchParams()
                    // params.append('ids', this.data.id)
                    del(data.id).then(response => {
                        console.log(response)
                        this.resetClick()
                    }).catch(error => {
                        console.log(error)
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消' + text
                    })
                })
            },
            // 表格排序
            sortChange(column) {
                console.log(column)
                this.sortField = column.prop;
                if (column.order == 'ascending') {
                    this.direction = 'asc'
                } else {
                    this.direction = 'desc'
                }
                this.loadUpMarket()
            },
            // 重置
            resetClick () {
                this.queryText = ''
                this.ListRequest()
            },
            ListRequest() {
                // this.queryText = ''
                let params = new URLSearchParams()
                params.append('pageNum', this.pageNum)
                params.append('pageSize', this.pageSize)
                params.append('total', this.total)
                params.append('name', this.queryText)
                params.append('endDate', this.endDate)
                params.append('reportCategoryId', this.reportCategoryId)


                list(params).then(response => {
                    console.log(response)
                    this.reportList = response.data.data
                }).catch(error => {
                    console.log('error!!')
                })
            },
            loadUpMarket () {
                this.ListRequest()
            },
            delNavClick() {
                this.reportCategoryId = ''
                this.ListRequest()
            },
            notClick() {
                this.reportCategoryId = 0;
                this.deleted = false;
                this.ListRequest()
            },
            nodeClick(data) {
                console.log('data',data)
                this.deleted = false;
                this.reportCategoryId = data.id;
                this.ListRequest()
            },
            /*Category () {
                let params = new URLSearchParams()
                params.append('pageNum', 1)
                params.append('pageSize', 20)

                return request({
                    url: '/admin/sysReportCategory/list',
                    method: 'get',
                    params: params
                }).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                })
                let data = {
                    id: 0,
                    isShow: true,
                    name: "111",
                    orders: 0,
                    parentId: 1,
                    thumbnail: "string"
                }
                /!*return request({
                    url: '/admin/sysReportCategory/save',
                    method: 'post',
                    data:data
                }).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                })*!/
            }*/
        }
    }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
